<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"/>-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="web description is me">
    <meta name="author" content="wangqinmin">
    <link rel="icon" href="../img/icon/B.ico">
    <title>bootstrap标签、徽章、大屏展播、页面标题</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap.css"/>
    <!--<link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap-theme.css"/>-->
    <link href="../css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <!--<link href="../css/starter-template.css" rel="stylesheet">-->
    <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../bootstrap-3.3.7/js/bootstrap.js"></script>
</head>
<body>

<!-- container：作用相当于一个自动居中的容器(用的地方很多，不然样式可能难看) -->
<div class="container">

    <!-- 标签 -->
    <h1>我们学习<span class="label label-danger">bootstrap</span></h1>
    <h2>我们学习<span class="label label-default">bootstrap</span></h2>
    <h3>我们学习<span class="label label-info">bootstrap</span></h3>
    <h4>我们学习<span class="label label-warning">bootstrap</span></h4>

    <hr/>

    <!-- class="badge" 徽章 :一般用于消息条数的显示 -->
    <a href="#">消息<span class="badge">16</span>条</a>
    <br/>
    <button type="button">您好,你一共有<span class="badge">89</span>条消息</button>

    <!--  去点列表 .list-unstyled ul与ol标签都可以 -->
    <ul class="list-unstyled list-group">
        <li class="list-group-item-danger h2"><a href="#">未读消息<span class="badge">9</span>条</a></li>
        <li class="list-group-item-success h3"><a href="#">已读消息<span class="badge">5</span>条</a></li>
    </ul>

    <hr/>
    <!-- 大屏展播：这里面的h1 和 p 标签，通常是搭配使用 -->
    <div class="jumbotron">
        <h1>主要标题</h1>
        <p>这里是想写的文本(简介)，。。。。。。。。。。。。。。。
            。。。。。。。。。。。。。。。。。。。。。。
            。。。。。。。。。。。。。。。。。。。。。。。。。。。。</p>
        <a href="#" class="btn btn-danger btn-lg">阅读更多</a>
    </div>
    <!-- 也可以用下面的方式，代替 -->
    <!-- page-header：使用之后，样式会好看些，跟上面的边框有一定的距离，看着更大气 -->
    <div class="page-header">
        <h1>主要标题</h1>
        <p>这里是想写的文本(简介)，。。。。。。。。。。。。。。。
            。。。。。。。。。。。。。。。。。。。。。。
            。。。。。。。。。。。。。。。。。。。。。。。。。。。。</p>
        <a href="#" class="btn btn-danger btn-lg">阅读更多</a>
    </div>

    <hr/>
</div>
</body>
</html>